var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <el-form inline label-width="90px" size="medium" v-if="options!==null">
        <el-form-item label="收付款时间">
          <el-date-picker style="width:244px" v-model="search.startTime" value-format="timestamp" :editable="false"
            :picker-options="startPickerOptions" type="datetime"></el-date-picker>
          <span>-</span>
          <el-date-picker style="width:245px" v-model="search.endTime" value-format="timestamp" :editable="false"
            :picker-options="endPickerOptions" type="datetime"></el-date-picker>
        </el-form-item>

        <el-form-item v-for="item in fields" :key="'search_'+item.field" :label="inputPlaceholder[item.field]">
          <board-select clearable has-option-when-null v-model="search[item.field]" class="search-input" :value-key="item.valueField"
            :value-field="item.valueField" :label-field="item.labelField" :placeholder="'请选择'+inputPlaceholder[item.field]"
            :options="vm[item.field+'List']" @visible-change="function(visible){visibleChange(visible,item)}">
            <template slot-scope="scope">
              <template v-for="option in scope.options">
                <el-option :key="option[item.valueField]" :value="option" :label="option[item.labelField]"></el-option>
              </template>
            </template>
          </board-select>
        </el-form-item>

        <el-form-item label="类型">
          <el-select clearable v-model="search.type" class="search-input" placeholder="请选择类型">
            <el-option v-for="type in typeList" :key="'type_'+type.value" :value="type.value" :label="type.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select clearable v-model="search.status" class="search-input" placeholder="请选择状态">
            <el-option v-for="status in statusList" :key="'status_'+status.value" :value="status.value" :label="status.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否销核">
          <el-select clearable v-model="search.isVerification" class="search-input" placeholder="请选择是否销核">
            <el-option v-for="verification in verificationList" :key="'verification_'+verification.value" :value="verification.value"
              :label="verification.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input-number is-decimal-zero v-model="search.startMoney" :controls="false" :min="0" :max="search.endMoney" :precision="2" style="width:150px">
          </el-input-number>
          <span>-</span>
          <el-input-number is-decimal-zero v-model="search.endMoney" :controls="false" :min="search.startMoney!==undefined?search.startMoney:0" :precision="2" style="width:150px">
          </el-input-number>
        </el-form-item>
      </el-form>
    </div>
  `;

  return {
    mixins: [linkageSelectMixin()],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      var self = this;
      var vueData = {
        loading: false,
        typeList: i18n.getDropDown('receiptPayment.type', [1, 2]),
        statusList: i18n.getDropDown('receiptPayment.status', [0, 1, 2]),
        verificationList: i18n.getDropDown('warehouseBalance.detail.isVerification', [0, 1]),
        options: null,
        inputPlaceholder: {
          receiptPaymentMode: "收付方式",
          createUser: "经手人",
          customerName: "收付款方",
          relationBank: "银行卡号",
          bank: "所属银行"
        },
        startPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'start');
          }
        },
        endPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'end');
          }
        }
      };

      var fields = ['receiptPaymentMode', {
        field: 'createUser',
        valueDataField: 'createUser.createUser',
        valueField: 'createUser',
        labelField: 'createUserName'
      }, 'customerName', 'relationBank', 'bank'];
      this.setDropdownData(vueData, fields);
      return vueData;
    },

    created: function () {
      this.setOptions();
    },

    methods: {
      setOptions: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('materialSelectFilter/getMaterialSelectData', {
          type: 24
        }).then(function (options) {
          self.options = options;
          self.loading = false;
        }).catch(function () {
          self.options = [];
          self.loading = false;
        });
      },

      checkDateRange: function (time, type) {
        var search = this.search;
        if (type === 'start') {
          var endTime = search.endTime;
          if (endTime === null) {
            return true;
          }
          return moment(time).isSameOrBefore(endTime, 'day');
        } else if (type === 'end') {
          var startTime = search.startTime;
          if (startTime === null) {
            return true;
          }
          return moment(time).isSameOrAfter(startTime, 'day');
        }
        return true;
      }
    },

    components: {
      SysAutocomplete: SysAutocomplete,
      BoardSelect: BoardSelect
    },

    template: template
  };
}();
